import { useEffect, useState } from "react";
import './Shou.css'
import { Badge, TabBar, Swiper, Toast } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import axios from 'axios'
import { AppOutline, MessageOutline, MessageFill, MovieOutline, UserOutline,LocationFill,EyeOutline } from 'antd-mobile-icons';
let Shou = (props) => {
    let Navigate=useNavigate()
    let [imgs, setImgs] = useState([
        'https://img0.baidu.com/it/u=1231118396,2069337056&fm=253&fmt=auto&app=138&f=PNG?w=860&h=291',
        'https://img0.baidu.com/it/u=900400835,900498859&fm=253&fmt=auto&app=138&f=GIF?w=1333&h=500',
        'https://img0.baidu.com/it/u=3284069935,2094736113&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500',
        'https://img2.baidu.com/it/u=656084057,3899620414&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=360',
        'https://img1.baidu.com/it/u=3917425236,2247578585&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=400'])
    let [address, setAddress] = useState([
        {
            id: "1",
            name: "北京"
        },
        {
            id: "2",
            name: "故宫"
        },
        {
            id: "3",
            name: "天安门"
        },
        {
            id: "4",
            name: "温泉"
        },
        {
            id: "5",
            name: "世界杯"
        },
        {
            id: "6",
            name: "景山公园"
        }
    ])
    let [playing, setPlaying] = useState([])
    useEffect(()=>{
        axios.get('http://127.0.0.1:3000/dyx_index/forlist').then(res=>{
            if(res.data.code==200){
                setPlaying(res.data.data)
            }
        })
        console.log(playing);
        
    },[])
    let items = imgs.map((item, index) => (<Swiper.Item key={index}>
        <div style={{ width: "100%", height: "100%" }} onClick={() => {
            Toast.show(`你点击了卡片 ${index + 1}`);
        }}>
            <img style={{ width: "100%", height: "100%", borderRadius: "1rem",zIndex:"-1",position:"absolute" }} src={item} alt="" />
        </div>
    </Swiper.Item>));
    return (
        <>
            <div className="dyx_box">
                <div className="dyx_header">
                    <input onFocus={()=>{
                        Navigate('/Dyx_Find')
                    }} placeholder="搜索目的地/景点" type="text" />
                    <button>搜索</button>
                    <div className="nav_history">
                        {
                            address.map((item, index) => {
                                return (
                                    <div className="dyx_nav" key={index}>
                                        <span style={{ fontSize: "1.5rem", lineHeight: "3rem",fontWeight:"bolder" }}>{item.name}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="dyx_mains">
                    <div className="dyx_main">
                        <div onClick={()=>{
                            Navigate('/Dyxsou')
                        }} className="dyx_cate" style={{ backgroundColor: "#20a890", borderTopLeftRadius: "1rem" }}>
                            <div className="img">
                                <img src="/img/qing.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>亲子游</span>
                            </div>
                        </div>
                        <div onClick={()=>{
                            Navigate('/Dyxsou')
                        }} className="dyx_catesss" style={{ backgroundColor: "#3c7ff6" }}>
                            <div className="img">
                                <img src="/img/book.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>文化游</span>
                            </div>
                        </div>
                        <div onClick={()=>{
                            Navigate('/Dyxsou')
                        }} className="dyx_catee" >
                            <div className="img">
                                <img src="/img/water.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>温泉游</span>
                            </div>
                        </div>
                        <div onClick={()=>{
                            Navigate('/Dyxsou')
                        }} className="dyx_catesd" style={{ borderTopRightRadius: "1rem" }}>
                            <div className="img">
                                <img src="/img/picture.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>周边游</span>
                            </div>
                        </div>
                        <div className="dyx_cate" onClick={()=>{
                            Navigate('/Map')
                        }} style={{ backgroundColor: "#7981f0", borderBottomLeftRadius: "1rem" }}>
                            <div className="img">
                                <img src="/img/map.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>旅游地图</span>
                            </div>
                        </div>
                        <div className="dyx_catees">
                            <div className="img">
                                <img src="/img/lou.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span onClick={()=>{Navigate('/list')}}>酒店民宿</span>
                            </div>
                        </div>
                        <div className="dyx_catesf">
                            <div className="img">
                                <img src="/img/car.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>汽车票</span>
                            </div>
                        </div>
                        <div className="dyx_catess" style={{ backgroundColor: "#20a890", borderBottomRightRadius: "1rem" }}>
                            <div className="img">
                                <img src="/img/plane.jpg" alt="" />
                            </div>
                            <div className="dyx_span">
                                <span>飞机票</span>
                            </div>
                        </div>
                    </div>
                    <div className="dyx_lun">
                        <Swiper style={{ width: "100%", height: "100%" }}>{items}</Swiper>
                    </div>
                    <div className="dyx_ti">
                        <p><LocationFill />带你玩遍<a style={{textDecoration:"none",fontSize:"1.5rem"}} href="#">北京市</a></p>
                    </div>
                    <div className="dyx_picture">
                        {
                            playing.map((item, index) => {
                                return (
                                    <div onClick={()=>{
                                        localStorage.setItem('playing',JSON.stringify(item))
                                        Navigate(`/pl/`+item._id)

                                    }} key={index} className="picture_one">
                                        <div className="img">
                                            <img src={item.picture} alt="" />
                                        </div>
                                        <div className="dyx_spanss">
                                            <p>{item.name}</p>
                                        </div>
                                        <div className="liu">
                                            <div className="dyx_tou">
                                                <img src={item.img} alt="" />
                                            </div>
                                            <div className="dyx_spans">
                                            <EyeOutline style={{verticalAlign:"middle"}} /><span style={{fontSize:"1.2rem",marginLeft:"0.5rem"}}>{item.num}万</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>

               


            </div>
        </>
    )
}

export default Shou;